import React from 'react'
import { Dialog } from 'antd-mobile'
import { CheckCircleOutline, CloseCircleOutline } from 'antd-mobile-icons'

const CustomToast = {
  success: (content, duration = 2000) => {
    Dialog.alert({
      className: 'custom-toast-dialog',
      title: '',
      content: (
        <div style={{
          textAlign: 'center',
          padding: '24px 16px',
          color: 'var(--theme-text-primary)'
        }}>
          <CheckCircleOutline style={{
            fontSize: '64px',
            color: 'var(--theme-success)',
            marginBottom: '20px'
          }} />
          <p style={{
            fontSize: '16px',
            color: 'var(--theme-text-primary)',
            margin: '0 0 8px 0',
            fontWeight: '500'
          }}>
            {content}
          </p>
        </div>
      ),
      confirmText: '',
      showConfirmButton: false,
      closeOnMaskClick: false,
      onConfirm: () => {},
      afterClose: () => {}
    })
    
    // 自动关闭
    setTimeout(() => {
      Dialog.clear()
    }, duration)
  },
  
  error: (content, duration = 2000) => {
    Dialog.alert({
      className: 'custom-toast-dialog',
      title: '',
      content: (
        <div style={{
          textAlign: 'center',
          padding: '24px 16px',
          color: 'var(--theme-text-primary)'
        }}>
          <CloseCircleOutline style={{
            fontSize: '64px',
            color: 'var(--theme-error)',
            marginBottom: '20px'
          }} />
          <p style={{
            fontSize: '16px',
            color: 'var(--theme-text-primary)',
            margin: '0 0 8px 0',
            fontWeight: '500'
          }}>
            {content}
          </p>
        </div>
      ),
      confirmText: '',
      showConfirmButton: false,
      closeOnMaskClick: false,
      onConfirm: () => {},
      afterClose: () => {}
    })
    
    // 自动关闭
    setTimeout(() => {
      Dialog.clear()
    }, duration)
  }
}

export default CustomToast
